<template>
  <el-dialog
    title="退费详情页面"
    :visible.sync="dialogVisible"
    width="58%"
    top="5vh"
    :close-on-click-modal="false"
    @close="handleClose"
    custom-class="refund-detail-dialog"
  >
    <div class="refund-detail-container">
      <!-- 顶部操作栏 -->
      <div class="dialog-header">
        <span class="cancel-text">取消Esc</span>
        <h3 class="dialog-title">订单详情</h3>
      </div>
      
      <!-- 信息卡片区域 -->
      <div class="card-container">
        <!-- 付款信息卡片 -->
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-money" style="color: #67C23A;"></i>
            <span>付款信息</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="info-label">实付金额：</span>
              <span class="info-value amount">￥{{ orderData.saleAmt || '0.00' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">支付方式：</span>
              <el-tag :type="getPaymentMethodTagType(orderData.paymentMethod)">
                {{ paymentMethodMap[orderData.paymentMethod] || '会员余额' }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">支付时间：</span>
              <span class="info-value">{{ orderData.costDate || formatCurrentTime() }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">订单状态：</span>
              <el-tag :type="getStatusTagType(orderData.state)">
                {{ statusMap[orderData.state] || '' }}
              </el-tag>
            </div>
          </div>
        </el-card>
        
        <!-- 买家信息卡片 -->
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-user" style="color: #409EFF;"></i>
            <span>买家信息</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="info-label">客户姓名：</span>
              <span class="info-value">{{ orderData.name || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户类型：</span>
              <el-tag :type="getPatientTypeTagType(orderData.patientType)">
                {{ patientTypeMap[orderData.patientType] || '普通客户' }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">手机号：</span>
              <span class="info-value">{{ orderData.phone || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">健康ID：</span>
              <span class="info-value">{{ orderData.healthId || '无' }}</span>
            </div>
          </div>
        </el-card>
        
        <!-- 收银信息卡片 -->
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-shop" style="color: #E6A23C;"></i>
            <span>收银信息</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="info-label">收银员：</span>
              <span class="info-value">{{ orderData.bilgOptId || 'QH007' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">收银窗口：</span>
              <span class="info-value">{{ orderData.window || '2号窗口' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">收银时间：</span>
              <span class="info-value">{{ orderData.bilgDate || formatCurrentTime() }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">处方科室：</span>
              <span class="info-value">{{ orderData.bilgDeptName || '急诊科门诊' }}</span>
            </div>
          </div>
        </el-card>
      </div>
      
      <!-- 商品信息表格 -->
      <el-card class="product-card">
        <div slot="header" class="card-header">
          <i class="el-icon-goods" style="color: #F56C6C;"></i>
          <span>详细信息</span>
        </div>
        <el-table
          :data="products"
          border
          style="width: 100%"
          class="product-table"
          :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
        >
          <el-table-column 
            prop="drugName" 
            label="名称" 
            width="288"
            align="left"
          >
            <template slot-scope="{row}">
              <div class="product-name">{{ row.drugName }}</div>
              <div class="product-spec">{{ row.drugSpec }}</div>
            </template>
          </el-table-column>
          <el-table-column 
            prop="prodentpName" 
            label="生产厂家" 
            width="268"
            align="left"
          >
            <template slot-scope="{row}">
              <el-tooltip :content="row.prodentpName" placement="top">
                <span class="text-ellipsis">{{ row.prodentpName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column 
            prop="salePric" 
            label="单价(元)" 
            width="168"
            align="left"
          >
            <template slot-scope="{row}">
              {{ row.salePric.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column 
            prop="cnt" 
            label="处方数量" 
            width="128"
            align="center"
          />
          <el-table-column 
            prop="total" 
            label="小计(元)" 
            width="100"
            align="right"
          >
            <template slot-scope="{row}">
              <span class="amount">{{ row.saleAmt.toFixed(2) }}</span>
            </template>
          </el-table-column>

        </el-table>
        
        <!-- 合计行 -->
        <div class="total-row">
          <span class="refund-label">合计：</span>
          <span class="refund-amount">￥{{ saleAmt }}</span>
        </div>
      </el-card>
    </div>
    
    <!-- 底部操作按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" size="small" @click="handleRefund">确认退费</el-button>
      <el-button type="primary" size="small" @click="handlePrint">打印</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'RefundDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
	  saleAmt:'',
      dialogVisible: this.visible,
      paymentMethodMap: {
        1: '现金',
        2: '微信',
        3: '支付宝',
        4: '银行卡',
        5: '会员余额'
      },
      patientTypeMap: {
        1: '普通病人',
        2: 'VIP病人',
        3: '员工',
        4: '特殊病人'
      },
      statusMap: {
      	0: '草稿',
      	1: '已收费',
      	2: '已配药',
      	3: '已发药',
      	4: '待退费',
      	5: '已退药',
		6: '已作废'
      },
      products: []
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal
    },
    orderData: {
      deep: true,
      handler(newVal) {
        this.transformOrderData(newVal)
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    
    formatCurrentTime() {
      const now = new Date()
      return `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
    },
    
    transformOrderData(data) {
		this.saleAmt = data.saleAmt; // 合计
      if (data && data.refundList) {
        this.products = data.refundList.map(item => ({
          ...item,
          retnCnt: item.retnCnt || 0
        }))
      }
    },
    
    getPaymentMethodTagType(method) {
      const map = {
        1: '',       // 现金 - 默认
        2: 'success', // 微信 - 绿色
        3: 'primary', // 支付宝 - 蓝色
        4: 'info',    // 银行卡 - 浅蓝
        5: 'warning'  // 会员余额 - 橙色
      }
      return map[method] || ''
    },
    
    getPatientTypeTagType(type) {
      const map = {
        1: '',       // 普通病人 - 默认
        2: 'success', // VIP病人 - 绿色
        3: 'info',    // 员工 - 浅蓝
        4: 'warning'  // 特殊病人 - 橙色
      }
      return map[type] || ''
    },
    
    getStatusTagType(status) {
      const map = {
        0: 'info',    // 草稿 - 浅蓝
        1: '',        // 已收费 - 默认
        2: 'warning',  // 已配药 - 橙色
        3: 'success',  // 已发药 - 绿色
        4: 'danger'    // 已退药 - 红色
      }
      return map[status] || ''
    },
    
    calculateRefundAmount() {
      return this.products.reduce((total, item) => {
        return total + (item.retnCnt * item.salePric)
      }, 0)
    },
    
    calculateRefundTotal() {
      this.$emit('refund-total-change', this.calculateRefundAmount())
    },
    
    handleRefund() {
		// 调用退费接口		tyrefund
      const refundItems = this.products
        .filter(item => item.retnCnt > 0)
        .map(item => ({
          id: item.id,
          drugId: item.drugId,
          drugName: item.drugName,
          retnCnt: item.retnCnt,
          retnAmt: item.retnCnt * item.salePric
        }))
      
      this.$emit('refund', {
        orderId: this.orderData.id,
        refundAmount: this.calculateRefundAmount(),
        refundItems
      })
    },
    
    handlePrint() {
      this.$emit('print', this.orderData)
    }
  }
}
</script>

<style lang="less" scoped>
.refund-detail-container {
  font-family: 'Microsoft YaHei', sans-serif;
  
  .dialog-header {
    position: relative;
    margin-bottom: 10px;
    text-align: center;
    
    .cancel-text {
      position: absolute;
      left: 0;
      top: 0;
      color: #999;
      font-size: 12px;
    }
    
    .dialog-title {
      color: #333;
      margin: 0;
      font-size: 12px;
      font-weight: bold;
    }
  }
  
  .card-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    
    .info-card {
      width: 32%;
      
      .card-header {
        display: flex;
        align-items: center;
        font-weight: bold;
        
        i {
          margin-right: 8px;
          font-size: 14px;
        }
      }
      
      .card-body {
        .info-item {
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          
          .info-label {
            color: #606266;
            min-width: 70px;
            font-size: 13px;
          }
          
          .info-value {
            color: #303133;
            font-size: 13px;
          }
          
          .amount {
            color: #F56C6C;
            font-weight: bold;
          }
          
          .el-tag {
            margin-left: 5px;
          }
        }
      }
    }
  }
  
  .product-card {
    .card-header {
      display: flex;
      align-items: center;
      font-weight: bold;
      
      i {
        margin-right: 8px;
        font-size: 16px;
      }
    }
    
    .product-table {
      // margin-bottom: 15px;
      
      .product-name {
        font-weight: 500;
      }
      
      .product-spec {
        color: #909399;
        font-size: 12px;
      }
      
      .text-ellipsis {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .amount {
        color: #F56C6C;
        font-weight: bold;
      }
    }
    
    .total-row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // padding: 10px 0;
      border-top: 1px solid #ebeef5;
      
      .total-label, .refund-label {
        color: #606266;
        margin-right: 5px;
        font-size: 14px;
      }
      
      .refund-label {
        margin-left: 20px;
      }
      
      .total-amount {
        color: #303133;
        font-weight: bold;
        font-size: 14px;
      }
      
      .refund-amount {
        color: #F56C6C;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.dialog-footer {
  text-align: center;
}

/* 调整el-dialog内部样式 */
/deep/(.refund-detail-dialog) {
  .el-dialog__body {
    padding: 15px 20px;
  }
  
  .el-card {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }
  
  .el-card__header {
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .el-card__body {
    padding: 15px;
  }
}
</style>